<template>
	<view class="search" style="background-color: #fff;">
		<view class="top"  :style="'height:' + sticky + 'px;padding-top:'+statusBarHeight +'px;'">
			<!-- @searchConfirm="searchConfirm" @searchBlur="searchBlur" -->
			<!-- <navbar ref="nav" :config="config" backColor="#000">
				<!--   <view slot="right" @click="goSearchConfirm" style="font-size: 28rpx; font-weight: 500; color: #FFFFFF;margin-right: 30rpx;" >
					搜索
				</view>
			</navbar> -->
			<!-- <u-icon name="arrow-left" color="#020202" size="31" @click="backFun"></u-icon> -->
			<image :src="imgUrl+'/order/back.png'" @click="backFun" class="backImage">
				<div class="search-box">
					<div class="search-wap">
						<!-- <text class="hxicon search-icon">&#xe65c;</text> -->
						<!-- <image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/home/search-icon.png" style="width: 32rpx;height: 26rpx; margin-left: 20rpx;">
		</image> -->
						<view class="searchImage">
							<image :src="imgUrl+'/search/search.png'" ></image>
						</view>
						<input type="text" focus class="sput" placeholder-style="color: #474747;font-size: 28rpx"
							confirm-type="search" v-model="inputValue" placeholder="请输入搜索内容" @confirm="searchConfirm" />
					</div>
					<div class="word" @click="goSearchConfirm">搜索</div>
				</div>
		</view>
		<view class="record" v-if="recordList.length>0">
			<view class="record-top"> 搜索历史 
			<!-- <image :src="imgUrl+'/search/history.png'" class="history">
				</image> -->
			</view>
			<view class="record-flex">
				<view class="record-item" v-for="(item,index) in recordList" :key="index" @click="goProductList(item)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="find">
			<view class="find-top"> 搜索发现
				<!-- <image :src="imgUrl+'/search/target.png'" class="target"></image> -->
			</view>
			<view class="find-flex">
				<view class="find-item" v-for="(item,index) in findList" :key="index"
					@click="goProductList(item.key_word)">
					{{ item.key_word }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				recordList: [],
				findList: [],
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				sticky: uni.getSystemInfoSync().statusBarHeight + 60,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "搜索",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					color: '#000',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
					// search: {
					// 	value: "",
					// 	placeholder: "请输入商品名称",
					// 	disabled: false,
					// },
				},
				inputValue: ''
			};
		},
		onShow() {
			// this.recordList = uni.getStorageSync("history") ?
			// 	uni.getStorageSync("history") :
			// 	[];
			if (uni.getStorageSync("history")) {
				this.recordList = uni.getStorageSync("history").reverse();
			}
			this.$http.get("/keyword/search/list", {
				limit: 20
			}).then((res) => {
				if (res && res.code == 200) {
					this.findList = res.list;
				}
			});
		},
		methods: {
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			onClickBtn(data) {
				//console.log(data);
			},
			//点击按钮
			goSearchConfirm() {
				// this.inputValue = this.$refs.nav.config.search.value;
				this.historyRecored()
				uni.navigateTo({
					url: "/pages/product/search/productList?keyword=" + this.inputValue
				});
			},
			historyRecored() {
				let word = this.inputValue
				if (word != '') {
					let history = uni.getStorageSync("history");
					if (!history) {
						uni.setStorageSync("history", [word]);
					} else {
						let arr = uni.getStorageSync("history");
						let isHad = false;
						for (var i = 0; i < arr.length; i++) {
							if (arr[i] == word) {
								isHad = true;
								break;
							}

						}
						if (!isHad) {
							if (arr.length > 10) {
								arr.splice(9, 1);
								let pp = arr.concat([word]);
								uni.setStorageSync("history", pp);
							} else {
								history = history.concat([word]);
								uni.setStorageSync("history", history);
							}
							this.recordList = uni.getStorageSync("history").reverse();
						}

					}
				}

			},
			searchBlur(e) {
				this.inputValue = e.value
			},
			searchConfirm() {
				// if (e.value) {
				//   if (e.value.length > 50) {
				//     this.$mUtil.toast("搜索最多50个字符");
				//     return false;
				//   }
				this.historyRecored()
				uni.navigateTo({
					url: "/pages/product/search/productList?keyword=" + this.inputValue,
				});

				// }
			}, //搜索结果页
			goProductList(text) {
				uni.navigateTo({
					url: "/pages/product/search/productList?keyword=" + text,
				});
			},

		},
	};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'hxicon';
		/* project id 2009392 */
		src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
	}

	.hxicon {
		font-family: "hxicon" !important;
		font-size: 20px;
		font-style: normal;
		/* #ifndef APP-NVUE */
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		/* #endif */
	}

	/deep/.hx-navbar__content__main_search_hxicon {
		span {
			font-size: 30rpx;
		}
	}

	.hx-navbar {
		/deep/ .hx-navbar__content {

			.hx_text_overflow {
				color: #fff !important;
			}
		}
	}

	/deep/.hx-navbar__content__main_search_input {}

	.search-box {
		width: 662rpx;
		height: 65rpx;
		background: #F5F5F5;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 8rpx;
		margin-left: 11rpx;

		.search-wap {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #F4F4F4;
			// border: 1px solid rgba(255, 255, 255, 0.42);
			border-radius: 30rpx;
			position: relative;
			justify-content: space-between;
			padding-left: 19rpx;

			.search-icon {
				font-size: 18px;
				margin-left: 30rpx;
				color: #474747;
			}

			.sput {
				margin-left: 25rpx;
				font-size: 22rpx;
				color: #474747;
				width: 100%;
			}
		}

		.word {
			width: 85rpx;
			height: 50rpx;
			background: #FF211F;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 400;
			font-size: 23rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}

	.find {

		margin-left: 19rpx;
		margin-top: 19rpx;

		.find-top {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 38rpx;

			.target {
				width: 31rpx;
				height: 31rpx;
				margin-left: 19rpx;
			}
		}

		.find-flex {
			display: flex;
			flex-wrap: wrap;

			.find-item {
				color: #AAAAAA;
				padding: 11rpx 31rpx;
				background-color: #F5F5F5;
				border-radius: 38rpx;
				margin: 0 19rpx 19rpx 0;
				font-weight: 400;
				font-size: 23rpx;
				color: #000000;

			}
		}
	}

	.record {
		margin-top: 19rpx;
		margin-left: 19rpx;

		.record-top {
			font-weight: 600;
			font-size: 31rpx;
			color: #000000;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}

		.record-flex {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.record-item {
				height: 54rpx;
				background: #F5F5F5;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				font-weight: 400;
				font-size: 23rpx;
				color: #000000;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				padding: 11rpx 31rpx;
				background-color: #F5F5F5;
				margin: 0 19rpx 19rpx 0;


			}
		}
	}

	page {
		background-color: #fff;
	}

	.searchImage {
		width: 31rpx;
		height: 31rpx;
	}

	.top {
		background-color: #fff;
		height: 104rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 11rpx;
		width: 100%;
	}

	.history {
		width: 31rpx;
		height: 31rpx;
		margin-left: 19rpx;
	}

	.backImage {
		width: 17rpx;
		height: 31rpx;
		padding-left: 26rpx;
	}

	.searchImage {
		width: 32rpx !important;
		height: 32rpx !important;
	}

	.searchImage image {
		width: 32rpx !important;
		height: 32rpx !important;
	}
</style>